<template>
    <div >
        <div class="tcp-server-port-setting">
            <div class="ip">
                本机IP地址:
                <el-input v-model="server_ip" placeholder="" style="width: 150px" disabled maxlength="15" oninput="value=value.replace((/^(0+)|[^\d]+/g),'')"/>
            </div>
            <div class="port">
                监听端口:
                <el-input v-model="server_port" placeholder="" style="width: 150px" maxlength="5" oninput="value=value.replace((/^(0+)|[^\d]+/g),'')"/>
            </div>
            <div class="server-state">
                <div class="state-show"></div>
                <el-button type="primary" @click="server_listen_handler">{{server_listen}}</el-button>
            </div>
            <el-divider border-style="solid" />
            <div class="client-state">
                已连接客户端
                <el-select v-model="client_index" class="client-select" placeholder="" @change="clientChange">
                  <el-option
                  v-for="item in mode_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  />
                </el-select>
            </div>
        </div>
    </div>
</template>

<script setup>
import { invoke } from "@tauri-apps/api/tauri";
import { reactive, ref ,markRaw,inject} from 'vue';
import { emit, listen } from '@tauri-apps/api/event'
const props = defineProps(['index'])  //这个外部改变值会导致子组件数值改变
let index = props.index
const centerDialogVisible = inject('centerDialogVisible')
const data = ref(1)
const server_ip = ref('172.0.0.1')
const server_port = ref('8081')
const server_listen_bool = ref(false)
const server_listen = ref('启动监听')
const server_state_color=ref('red')
const client_index =ref('')          //value
let $emit = defineEmits(['rec_data_update'])
const rec_data_update= async (message)=>{
    $emit('rec_data_update',message)
}
async function newServer(){
    const unlisten = await listen('s'+index,  async (event) => {
        mode_options.value.push({
            value:event.payload.id,
            label:event.payload.ip+":"+event.payload.port
        });
    });
    const unlisten1 =  await listen('s'+index+'r', async (event) => {
            rec_data_update(event.payload.message)
            console.log(event.payload)
    });
    const unlisten2 =  await listen('s'+index+'c', async  (event) => {
        console.log(mode_options.value)
        for(let i = 0; i < mode_options.value.length; i++) {
            if(mode_options.value[i].value == event.payload.count.toString())
            {
                mode_options.value.splice(i,1)
                console.log("closed")
                break;
            }
        }
        console.log(mode_options.value)
    });
    server_listen_bool.value = await invoke("newServer", { index:index.toString(),ip: server_ip.value,port:server_port.value});
}
async function getLocalIP(){
    server_ip.value=await invoke("getIP")
}
async function listen_to_greet() {
  const unlisten = await listen('test', (event) => {
        console.log( event.payload.message)
  });
}
//需要设置响应式，否则Vue不会自动更新
const mode_options = ref([   

])
watch(server_listen_bool, async (new_bool, old_bool) => {
    if(new_bool==true){
        server_listen.value="停止监听"
        server_state_color.value='blue'
    }else{
        server_listen.value="启动监听"
        server_state_color.value='red'
    }
})
const server_listen_handler = async () =>{
    //server_listen_bool.value = !server_listen_bool.value
    //console.log(server_listen_bool.value)
    console.log("new server")
    
    await newServer()
    //第六步：配置端口，开启服务
}
const clientChange = async () =>{
    //server_listen_bool.value = !server_listen_bool.value
    //console.log(server_listen_bool.value)
}
onMounted(async ()=> { 
    getLocalIP()
});
</script>

<style>
.tcp-server-port-setting{
    width: 100%;
    height: 325px;
}
.ip{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.port{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.server-state{
    margin-top: 10px;
    display: flex;
    justify-content:space-around;
    padding: 0 10px 0 10px;
}
.state-show{
    width: 30px;
    height: 30px;
    border: 1px solid v-bind(server_state_color);
    border-radius: 50%;
    background-color: v-bind(server_state_color);
}
.client-state{
    margin-top: 10px;
}
.client-select{
    margin: 5px auto;
    width:150px;
}
</style>